<template>
  <div class="ku-gou-header" :class="[systemSettingStore.$state.deskAppRangeType]">
    <system-child-btn :perv-icon-list="systemIcon" close-type="hidden" />
    <div class="icon" @mousedown.stop @dblclick.stop>
      <span><i class="iconfont wos-to-left fs16" /></span>
      <span><i class="iconfont wos-refresh fs16" /></span>
    </div>
    <ul class="nav-list" @mousedown.stop @dblclick.stop>
      <li :class="{ checked: content === 'music' }" @click="emit('content', 'music')">音乐</li>
      <li>直播</li>
      <li>听书</li>
      <li>探索</li>
    </ul>
    <div class="search" @mousedown.stop @dblclick.stop>
      <i class="iconfont wos-search-min" />
      <input type="text" placeholder="搜索音乐" />
    </div>
  </div>
</template>

<script setup lang="ts">
import SystemChildBtn from '@/base/systemWindow/systemChildBtn.vue'
import { computed } from 'vue'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'
import type { PropType } from 'vue'

defineProps({
  content: {
    type: String as PropType<string>,
    default: ''
  }
})
const emit = defineEmits(['content'])

const systemSettingStore = useSystemSettingStore()

// 系统按钮增加
const systemIcon = computed(() => {
  return [
    {
      icon: 'wos-theme',
      event: () => {
        emit('content', 'theme')
      }
    },
    {
      icon: 'wos-email',
      event: () => {
        console.log(22222)
      }
    },
    {
      icon: 'wos-menu-line',
      event: () => {
        console.log(333333)
      }
    }
  ]
})
</script>

<style scoped lang="scss">
.ku-gou-header {
  position: relative;
  height: 80px;
  display: flex;
  align-items: center;
  transition: color 0.3s;
  color: var(--font-checked-color);

  &.ios {
    ::v-deep(.system-child-btn) {
      position: absolute !important;
      left: 0 !important;
      top: 12px;
      height: 12px;
      transition: color 0.3s;
      color: var(--font-checked-color);
      padding-right: 15px;
    }
  }

  &.win {
    ::v-deep(.system-child-btn) {
      transition: color 0.3s;
      color: var(--font-checked-color);
      padding-right: 15px;

      > span {
        width: 30px;

        &:hover {
          color: var(--hover-color);
          background-color: transparent;

          &::after {
            display: none;
          }
        }
      }
    }
  }

  .icon {
    padding-left: 10px;

    span {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 36px;
    }
  }

  .nav-list {
    padding-left: 40px;
    padding-right: 20px;
    display: flex;
    font-weight: 600;
    font-size: 24px;

    > li {
      padding: 0 10px;
      transition: color 0.3s;
      color: var(--font-color);
      position: relative;

      &.checked {
        color: var(--font-checked-color);

        &::after {
          content: '';
          position: absolute;
          bottom: -14px;
          left: 50%;
          transform: translateX(-50%);
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: var(--hover-color);
        }
      }
    }
  }

  .search {
    display: flex;
    width: 148px;
    height: 34px;
    border-radius: 17px;
    transition:
      width 0.3s,
      background-color 0.3s;
    background-color: var(--search-bg);

    &:focus-within {
      width: 300px;
    }

    .wos-search-min {
      display: inline-block;
      width: 34px;
      height: 34px;
      text-align: center;
      line-height: 34px;
      border-radius: 50%;
    }

    input {
      width: 100%;
      height: 100%;
      background-color: transparent;
    }
  }
}
</style>
